/* component */
import FormStyleFontComponent from '@src/component/form/components/FormStyle/FormStyleFont.tsx'
import FormStyleColorComponent from '@src/component/form/components/FormStyle/FormStyleColor.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import Field from '@model/entity/Field'
/* hooks */
import { useFormComponentUpdatedEmitEvent } from '@hooks/form/useForm'
/* mixins */
import FormMixin from '@src/component/form/mixin/form'
/* model */
import { FormStyle, FormStyleFont } from '@model/form/FormStyle'
/* scss */
import '@src/component/form/components/FormStyle/FormStyle.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef, ToRefs } from 'vue'
import { CommonComponentInstance } from '@model/VC'

export type FormStyleBuildProps = {
  // 字段
  field: Field | undefined,
  // 值
  value: FormStyle | undefined,
  isShowFont: boolean | undefined,
  isShowColor: boolean | undefined,
}

export interface FormStyleBuildSetupState {
  onFormStyleFontChangeHandler: (value: FormStyleFont) => void
  onFormStyleColorChangeHandler: (value: string) => void
}

export type FormStyleBuildInstance = ComponentInstance & FormStyleBuildSetupState
export type FormStyleBuildVM = ComponentRenderProxy<FormStyleBuildProps> & CommonComponentInstance

export default defineComponent<FormStyleBuildProps, FormStyleBuildSetupState>({
  name: ComponentNameEnum.FormStyleBuild,
  mixins: [FormMixin],
  props: {
    isShowFont: {
      type: Boolean,
      default: true
    },
    isShowColor: {
      type: Boolean,
      default: true
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props: FormStyleBuildProps, { emit }) {
    
    const onFormStyleFontChangeHandler = (value: FormStyleFont) => {
      const newValue: FormStyleFont = Object.assign(props.value, value)
      useFormComponentUpdatedEmitEvent(emit, props.field as Field, newValue)
    }
    
    const onFormStyleColorChangeHandler = (value: string) => {
      const newValue: FormStyleFont = Object.assign(props.value, { color: value })
      useFormComponentUpdatedEmitEvent(emit, props.field as Field, newValue)
    }
    
    return {
      onFormStyleFontChangeHandler,
      onFormStyleColorChangeHandler
    }
  },
  render() {
    const classNames: Record<string, boolean> = {
      'form-style-build': true,
      'form-style-build-font': Boolean(this.isShowFont),
      'form-style-build-color': Boolean(this.isShowColor)
    }
    
    return (
      <div class={classNames}>
        { this.isShowFont && <form-style-font value={this.value} onChange={this.onFormStyleFontChangeHandler} /> }
        { this.isShowColor && <form-style-color value={this.value} onChange={this.onFormStyleColorChangeHandler} /> }
      </div>
    )
  },
  components: {
    [ComponentNameEnum.FormStyleFont]: FormStyleFontComponent,
    [ComponentNameEnum.FormStyleColor]: FormStyleColorComponent
  }
})
